import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'data-analysis',
  templateUrl: 'data-analysis.component.html',
  styleUrls: ['data-analysis.component.scss']
})
export class DataAnalysisComponent implements OnInit {

  sourceType: number = 0;
  timeLine: any = [];
  echartsData: any;
  constructor() { }

  ngOnInit() {
  }
//概况 echarts折线图配置项
  dashEcharts(){
    let myChart = echarts.init(document.getElementById('dash-echarts-line')),
      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['注册量','意向客户','意向代理']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeLine
        },
        yAxis: {
          type: 'value'
        },
        series: this.echartsData
      };

    // 绘制图表
    myChart.setOption(option,true);
    window.onresize = myChart.resize;
  };

  //访问 echarts图表
  visitEcharts(){
    let visitChart = echarts.init(document.getElementById('visit-echarts-line')),
        sourceChart = echarts.init(document.getElementById('visit-source')),
        timeChart = echarts.init(document.getElementById('visit-time')),
        deepChart = echarts.init(document.getElementById('visit-deep')),

      visitOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['注册量','意向客户','意向代理']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeLine
        },
        yAxis: {
          type: 'value'
        },
        series: this.echartsData
      },
      /*访问分布*/
      sourceOption = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data:['直接访问','邮件营销','联盟广告']
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            color: ['#86D560', '#AF89D6', '#59ADF3'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#ffffff',
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
            ]
          }
        ]
      },

      /*访问时长*/
      timeOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: "{a} <br/>{b} : {c}%"
        },
        legend: {
          data: ['2016年']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          "axisLabel": {
            "interval": 0,
            formatter: '{value}%',
          }
        },
        yAxis: {
          type: 'category',
          data: ['康体健身与休闲娱乐',
            '酒店IT与安防设备',
            '酒店建筑',
            '酒店布草及纺织用品']
        },
        series: [{
          name: '2016年占比',
          type: 'bar',
          data: [2.00, 3.00, 5.00, 5.50]
        }]
      },

      /*访问深度*/
      deepOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: "{a} <br/>{b} : {c}%"
        },
        legend: {
          data: ['2016年']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          "axisLabel": {
            "interval": 0,
            formatter: '{value}%',
          }
        },
        yAxis: {
          type: 'category',
          data: ['康体健身与休闲娱乐',
            '酒店IT与安防设备',
            '酒店建筑',
            '酒店布草及纺织用品']
        },
        series: [{
          name: '2016年占比',
          type: 'bar',
          data: [2.00, 3.00, 5.00, 5.50]
        }]
      };

    // 绘制图表
    visitChart.setOption(visitOption,true);
    sourceChart.setOption(sourceOption,true);
    timeChart.setOption(timeOption,true);
    deepChart.setOption(deepOption,true);

    window.onresize = visitChart.resize;
    window.onresize = sourceChart.resize;
    window.onresize = timeChart.resize;
    window.onresize = deepChart.resize;
  }

  //用户画像
  portrayalEcharts(){
    let sexChart = echarts.init(document.getElementById('sex-echarts')),
        ageChart = echarts.init(document.getElementById('age-echarts')),
        sexOption = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:['男','女']
          },
          series: [
            {
              name:'性别分布',
              type:'pie',
              radius: ['50%', '70%'],
              color: ['#86D560', '#AF89D6'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#ffffff',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {value:335, name:'男'},
                {value:310, name:'女'}
              ]
            }
          ]
        },

      ageOption = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data:['男','女']
        },
        series: [
          {
            name:'性别分布',
            type:'pie',
            radius: ['50%', '70%'],
            color: ['#86D560', '#AF89D6'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#ffffff',
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:335, name:'男'},
              {value:310, name:'女'}
            ]
          }
        ]
      };

    sexChart.setOption(sexOption,true);
    ageChart.setOption(ageOption,true);

    window.onresize = sexChart.resize;
    window.onresize = ageChart.resize;

  }
}
